<template>
  <div class="home">
    <van-index-bar :index-list="carlist.word">
      <div v-for="(v,i) in carlist" :key='i'>
        <van-index-anchor :index="v.word">{{v.word}}</van-index-anchor>
        <dl v-for="(item,index) in v.car" :key='index' class="wrap" @click="onMask(item.id,i)">
          <dt><img :src="item.img" alt=""></dt>
          <dd>{{item.name}}</dd>
        </dl>
      </div>
    </van-index-bar>
      <div id="main" :class="visible?'active':''" @click="hand()">
        <h3>详情</h3>
          <div class="con">
            <dl v-for="(v,i) in children" :key='i'>
              <dt><img :src="v.url" alt=""></dt>
              <dd>
                {{v.title}}
              </dd>
            </dl>
          </div>
      </div>
  </div>
</template>

<script>
import {getCarList} from "../api/index"
import axios from "axios"
export default {
  name: 'Home',
  data(){
    return{
      carlist:[],
      show:false,
      visible:true,
      children:[]
    }
  },
  methods:{
    getdData(){
      getCarList().then(res=>{
        this.carlist=res.data.data
      })
    },
    onMask(id,i){
      this.visible=!this.visible
      console.log(id,i)
      axios.post('/api/detail',({id:id,index:i})).then(res=>{
        console.log(res.data.data.children)
        this.children=res.data.data.children
      })
    },
    hand(){
      this.visibles=!this.visibles
    }
  },
  created(){
    this.getdData()
  }
}
</script>
<style lang="scss" scoped>
  .home{
    width: 100vw;
    height: 100vh;
    .wrap{
      width: 100%;
      height: 70px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      justify-content: start;
      border-bottom: 1px solid #ccc;
      dt{
        margin-right: 10px;
        img{
          border-radius: 50%;
        }
      }
    }
  }
  .van-index-anchor{
    background: #ccc!important;
  }
    #main{
      width: 80vw;
      height: 100vh;
      background: #f3f3f3;
      position: fixed;
      top: 0;
      right: 0;
      z-index: 99;
      transition: .8s;
      padding: 10px;
      h3{
        line-height: 50px;
        background: snow;
        text-align: center;
      }
      .con{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        dl{
        width: 45%;
        margin-bottom: 5px;
        img{
          width: 100%;
          border-radius: 5px;
        }
        text-align: center;
        dd{
          background: #ccc;
          padding: 5px 0;
          border-radius: 5px;
        }
      }
      }
      
      &.active{
        right:-100vw
      }
    }
</style>
